<template>
  <div>
    御剑乘风来,除魔天地间!

    <!-- 渲染数据 -->
    <ul>
      <li v-for="item in list" :key="item.id">
        <img style="width: 100px" :src="item.img" alt="" />
        {{ item.title }}
      </li>
    </ul>
    <!-- 遮罩层 -->
    <div v-loading></div>
    <hr />
    <hr />

    <!-- 图片加载失败案例 -->
    <!-- <img
      v-errorImg="
        'https://img2.baidu.com/it/u=255089752,2114889504&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1685034000&t=4ec3cec4d8f0771216310fcffb91f717'
      "
      src="http://ajax-api.itheima.net/images1/0.webp"
      alt=""
    /> -->

    <!-- 如果用本地图片 要先导入 在使用图片
    如  import img  from '地址'
    -->
    <img
      v-errorImg="imgCom"
      src="http://ajax-api.itheima.net/images1/0.webp"
      alt=""
    />
  </div>
</template>
<script>
import axios from 'axios'
import imgCom from './imgs/xin.webp'
export default {
  name: 'app',
  components: {

  },
  data () {
    return {
      val: '我改名字了',
      list: [],
      imgCom
    }
  },
  directives: {

    loading: {
      inserted (el) {
        el.innerHTML = '稍等正在加载'
        el.classList.add('active')
      },
      // updata 钩子 值被修改后 更新时触发
      update (el) {
        setTimeout(() => {
          el.style.display = 'none'
        }, 3000);
      }
    },
    errorImg: {
      inserted (el, binding) {
        //元素加载失败就会触发
        el.onerror = function () {
          el.src = binding.value
        }
      },
    }
  },
  created () {
    this.getNew()

  },

  methods: {
    async getNew () {
      const res = await axios.get('http://hmajax.itheima.net/api/news')
      console.log(res)
      this.list = res.data.data
    }
  }
}
</script>
<style lang='less'  scoped>
.active {
  width: 100vw;
  height: 100vh;
  background-color: rgba(241, 255, 148, 0.7);
  position: fixed;
  top: 0;
  left: 0;
  text-align: center;
  line-height: 100vh;
  font-size: 80px;
  color: hotpink;
}
</style>
